<!--
 * @Author: your name
 * @Date: 2021-06-27 20:41:53
 * @LastEditTime: 2021-07-04 20:32:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_shop_mananger\src\views\home\componets\navBar.vue
-->
<template>
  <div class="navBar">
    <el-menu background-color="#333744" text-color="#fff" active-text-color="#409FFF" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
      <el-button  @click="toggleMenu" :icon="isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'" style="backgroundColor:#333744;border:none;width:64px;"></el-button>
      <!-- 一级菜单 -->
      <el-submenu  v-for="item in menus" :key="item.id" :index="item.id.toString()" >
        <!-- 一级菜单内容 -->
        <template slot="title">
          <i :class="menuIconObj[item.id]"></i>
          <span>{{item.authName}}</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item  v-for="child in item.children" :key="child.id" :index="'/'+child.path"  @click="saveNavPath('/'+child.path)" >
          <template slot="title">
          <i class="el-icon-menu"></i>
          <span>{{child.authName}}</span>
        </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default{
  props:{
    menus:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  data(){
    return {
      menuIconObj:{
        '125':'el-icon-user-solid',
        '103':'el-icon-chat-line-square',
        '101':'el-icon-suitcase',
        '102':'el-icon-notebook-2',
        '145':'el-icon-data-analysis',
      },
      isCollapse:false,
      activePath:'/welcome'
    }
  },
  methods: {
    toggleMenu(){
      this.isCollapse=!this.isCollapse;
      this.$emit('toggleMenu',this.isCollapse);
    },
    saveNavPath(activePath){
      window.sessionStorage.setItem('activePath',activePath);
    }
  },
  created(){
    this.activePath=window.sessionStorage.getItem('activePath');

  }

}
</script>
<style lang="scss" scoped>
.navBar{
  width: 100%;
  height: 100%;
}
.el-menu{
  border: none;
}
</style>
